<template>
  <div class="z-table" ref="tabRef">
    <z-button class="setting" @click="onSetting" v-if="isCustomCol">
      自定义列
      <z-icon icon="el-icon-setting"></z-icon>
    </z-button>
    <el-table
      :data="origninData"
      highlight-current-row
      :max-height="fitHeight"
      border
      :row-class-name="rowClassName"
      v-on="$listeners"
    >
      <el-table-column
        type="selection"
        width="80"
        label="全选"
        v-if="hasSelect"
        :align="align"
      ></el-table-column>
      <el-table-column
        type="index"
        width="50"
        label="序号"
        v-if="hasIndex"
        :align="align"
      ></el-table-column>
      <el-table-column
        v-for="item in columnsRender"
        :key="item.key"
        :prop="item.key"
        :label="item.title"
        :width="item.width"
        :fixed="item.fixed"
        :sortable="item.sortable"
        :className="item.className"
        :stop="item.stop"
        :align="align"
      >
        <template slot="header" slot-scope="scope">
          <z-builder
            v-if="item.builderHeader"
            :name="item.builderHeader"
            :row="scope.row"
            :index="scope.$index"
            :column="item"
          />
          <span v-else>{{ item.title }}</span>
        </template>
        <template slot-scope="scope">
          <z-builder
            v-if="item.builder"
            :name="item.builder"
            :row="scope.row"
            :index="scope.$index"
            :column="item"
            :label="scope.row[item.key]"
          />
          <div v-else-if="item.hasTooltip">
            <el-tooltip :content="getRowText(scope.row, item)" placement="top">
              <p class="show-over-tooltip">{{ getRowText(scope.row, item) }}</p>
            </el-tooltip>
          </div>
          <div v-else>{{ getRowText(scope.row, item) }}</div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="isPagination"
      layout="sizes,prev, pager, next"
      :total="total"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      ref="paginationRef"
      @current-change="onChangePage"
      v-on="$listeners"
    />
  </div>
</template>

<script>
import ZBuilder from "./ZBuilder";
import ZIcon from "./ZIcon.vue";
import ZButton from "./ZButton.vue";

export default {
  components: { ZBuilder, ZIcon, ZButton },
  props: {
    origninData: {
      type: Array,
      default() {
        return [];
      },
    },
    origninColumns: {
      type: Array,
      default() {
        return [];
      },
    },
    hasSelect: {
      type: Boolean,
      default: false,
    },
    hasIndex: {
      type: Boolean,
      default: false,
    },
    align: {
      type: String,
      default: "center",
    },
    //是否自定义列
    isCustomCol: {
      type: Boolean,
      default: true,
    },
    //是否分页
    isPagination: {
      type: Boolean,
      default: true,
    },
    //总条数
    total: {
      type: Number,
      default: 0,
    },
    //分页条数区间
    pageSizes: {
      type: Array,
      default: () => [10, 20, 30, 40, 50],
    },
    //每页条数
    pageSize: {
      type: Number,
      default: 10,
    },
  },
  data() {
    return {
      fitHeight: 0,
    };
  },
  mounted() {
    setTimeout(() => {
      const tableH = this.$refs.tabRef.clientHeight;
      const paginationH = this.isPagination ? this.$refs.paginationRef.$el.clientHeight : 0;
      this.fitHeight = tableH - paginationH;
    }, 0);
  },
  computed: {
    columnsRender() {
      return this.origninColumns.filter((item) => !item.hidden);
    },
  },
  methods: {
    rowClassName({ rowIndex }) {
      return rowIndex % 2 ? "stripe-bg" : "";
    },
    getRowText(row, origninColumns) {
      if (origninColumns.getText instanceof Function) {
        return origninColumns.getText(row);
      }
      return row[origninColumns.key];
    },
    onSetting() {
      this.$createPopup({
        ctor: () => import("../ZCustom/ZTableFilter"),
        props: {
          origninColumns: this.origninColumns,
        },
      });
    },
    onChangePage(v) {
      //换个名字，避免与table的current-change冲突
      this.$emit("page-change", v);
    },
  },
};
</script>

<style lang="scss" scoped>
.z-table {
  position: relative;
  height: 100%;

  ::v-deep .el-table__cell {
    padding: 8px 0;
  }

  ::v-deep .el-pagination {
    text-align: right;
  }

  .setting {
    position: absolute;
    top: -48px;
    right: 0;
    cursor: pointer;
  }
}
</style>
